<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <input type="text" id="username">



    <div class="box"></div>


    <script>
        // inp只发生变化  div跟着变化 

        // 1 获取元素  

        const inp = document.querySelector('input');
        const divEle = document.querySelector('.box');
        var username = document.querySelector('#username');
        const obj = {name:'张三',age:19}
        const result = {};

        // Object.defineProperty(result,'age',{
        //     get(){
        //         return obj.age
        //     },
        //     set(val){
        //         obj.age = val;
        //         divEle.innerHTML = `您好,${result.age}岁的${result.name}`
        //     }
        // })

        // result.age = 21;

        // 上面有个小缺陷 因为 只有age属性被劫持  没有name 属性 

        // 所以result.name 是undefined 


        //现在想 name age 都要劫持 
            
        function objserver(origin,fn){
            const result = {};
            // origin 是原始数据 
            // fn 接触以后做的事情 
            for(let k in origin){
                Object.defineProperty(result,k,{
                    get(){
                        return origin[k];
                    },
                    set(val){
                        origin[k] = val
                        fn(result); // 修改数据以后 将劫持的数据传过去
                    }
                })
            }
            fn(result);// 打开页面 就得传过去 
            // 为了在div中显示内容 
            // 需要不等这个函数返回值 就得把劫持好的数据传过去  
            // 如果不传  div内容不显示
            return result; // 返回到是被劫持后的数据 
        }

        const res_data = objserver({name:'龙飞',age:20},result=>{
            divEle.innerHTML = `你好${result.age}岁的${result.name}`
        })

        console.log(res_data);

        inp.oninput = function(){
            res_data.age = this.value;
        }

        username.oninput = function(){
            res_data.name = this.value;
        }

       
    </script>

    
</body>
</html>